<template>
    <div class="betting">
        <h3>{{ $t('language.betting.name') }}</h3>
        <dl>
            <dd><span>{{ $t('language.betting.currency') }}</span><el-select class="select"
                    v-model="bettingForm.coinType" placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></dd>
            <dd><span>{{ $t('language.betting.provider') }}</span><el-select class="select"
                    v-model="bettingForm.coinType" placeholder="Select" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select></dd>
            <dd>
                <span></span>

                <el-date-picker @change="initData" v-model="timerange" type="datetimerange"
                    format="YYYY-MM-DD HH:mm:ss" />
            </dd>
        </dl>
        <el-table show-overflow-tooltip highlight-current-row style="width: 926px;overflow-x: auto;"
            :data="recordData.gameRecords" max-height="250" :empty-text="$t('language.betting.nodata')" border
            header-row-class-name="headclass">
            <el-table-column resizable type="index" width="90":label="$t('language.betting.table1.title1')" align="center" />
            <el-table-column resizable prop="playtime" :label="$t('language.betting.table1.title2')" align="center" />
            <el-table-column resizable prop="gameUID" :label="$t('language.betting.table1.title3')" align="center" />
            <el-table-column resizable align="center" :label="$t('language.betting.table1.title4')">
                <template #default>
                    BRL
                </template>
            </el-table-column>
            <el-table-column resizable align="center" prop="bettingCoins"
                :label="$t('language.betting.table1.title5')" />
            <el-table-column resizable align="center" prop="winningCoins"
                :label="$t('language.betting.table1.title6')" />
            <el-table-column resizable align="center" prop="bettingCoins"
                :label="$t('language.betting.table1.title7')" />
            <el-table-column resizable align="center" prop="winningCoins"
                :label="$t('language.betting.table1.title8')" />

        </el-table>
        <div class="page">
            <el-pagination background layout="sizes,prev, pager, next" v-model:current-page="bettingForm.pageIndex"
                :page-sizes:="[10, 20, 30, 40]" v-model:page-size="bettingForm.pageSize"
                :total="recordData.page.totalCount" />
        </div>
        <el-table show-overflow-tooltip highlight-current-row :data="recordData.gameRecords"
            style="width: 926px;overflow-x: auto;" max-height="300" :empty-text="$t('language.betting.nodata')" border
            header-row-class-name="headclass">
            <el-table-column width="90" resizable type="index" :label="$t('language.betting.table2.title1')" align="center" />
            <el-table-column resizable prop="playtime" :label="$t('language.betting.table2.title2')" align="center" />
            <el-table-column resizable prop="gameUID" :label="$t('language.betting.table2.title3')" align="center" />
            <el-table-column resizable align="center" :label="$t('language.betting.table2.title4')">
                <template #default>
                    BRL
                </template>
            </el-table-column>


        </el-table>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]

let store = useStore()
let userinfo = computed(() => store.userinfo)
let bettingForm = reactive({
    id: userinfo.value.gameID,
    coinType: 0,
    platformId: 0,
    startDateTime: '2024-05-01 17:03:52',
    endDateTime: getAllTime('-'),
    pageIndex: 1,
    pageSize: 10
})
let timerange = ref<[Date, Date]>([
    new Date(),
    new Date(),
])
let recordData: any = reactive({
    page: {
        pageIndex: 0,
        pageSize: 0,
        totalCount: 0
    },
    gameRecords: []
})
const options = [
    {
        value: 0,
        label: t("language.betting.all"),
    },
    {
        value: 1,
        label: "BRL",
    },
    {
        value: 2,
        label: "USDT",
    },
];
//加载loading
let loadingbetting = shallowRef<boolean>(true)
//数据初始化
let initData = async (e = []) => {

    if (e.length != 0) {
        bettingForm.startDateTime = e[0]
        bettingForm.endDateTime = e[1]
    }
    loadingbetting.value = true
    await nextTick()
    await useAllData("BetRecord", "/Game/v1.0/Record/BetRecord", bettingForm).then((res: any) => {
        recordData.gameRecords = res.data.value.data.gameRecords
        recordData.page = res.data.value.data.page
    }).finally(() => {
        loadingbetting.value = false
    })
}
//监听时间以及数据是否发生变化
watch([() => timerange, () => bettingForm], () => {
    initData()
}, {
    deep: true,
    immediate: true
})
</script>
<style lang="scss">
.el-pager .number {
    color: #b5bac8 !important;
}

.el-pager .is-active {
    color: #0a906c !important;
}

.el-scrollbar__wrap,
.el-popper,
.el-select-dropdown,
.el-scrollbar,
.el-scrollbar__view,
.el-select-dropdown,
.el-select-dropdown__wrap,
.el-select-dropdown__list {
    background-color: rgb(39, 42, 48) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;

    .el-select-dropdown__item {
        color: #b9bdc9 !important;


    }

    .is-hovering {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
        font-weight: bold;
    }

    .selected {
        color: #fff !important;
        background-color: rgb(39, 42, 48) !important;
        font-weight: bold;
    }

}

.el-popper__arrow::before {
    background-color: rgb(39, 42, 48) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.betting {

    .el-table th,
    .el-table td,
    .el-table tr {
        background-color: transparent !important;


    }

    .el-table td,
    .el-table th,
    .el-table--border,
    .el-table__inner-wrapper {
        border-color: #4b4e55 !important;
        color: #b5bac8 !important;
    }

    .el-table td {
        padding: 4px 0;
    }

    .el-table {
        --el-table-border-color: #4b4e55 !important;
        margin-top: 20px;

        .headclass {
            font-size: 14px;
            color: #b5bac8;
            font-weight: bold;
            background-color: rgb(61, 65, 72) !important;
        }

        :deep(.el-table__body) {
            background-color: transparent !important;
        }
    }

    .el-select .el-input.is-focus:not(.el-input--prefix) .el-input__inner:focus {
        box-shadow: none !important;
    }

    .el-select__wrapper {
        border: 1px solid rgb(74, 76, 83) !important;
    }

    .el-select,
    .el-select__wrapper {
        background-color: rgb(39, 42, 48) !important;
        box-shadow: none !important;
        outline: none !important;
        color: #fff !important;

        .is-hovering {
            color: #fff !important;
            background-color: rgb(39, 42, 48) !important;
            border: 1px solid #0a906c !important;
        }

        .el-select__placeholder {
            color: #fff !important;
            background-color: rgb(39, 42, 48) !important;
        }

        .is-focused {
            color: #fff !important;
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;
        }


    }


    .el-input__inner {
        color: #fff !important;
    }

    .select {
        height: 40px !important;
        width: 140px;

        .el-select__wrapper {
            background-color: rgb(39, 42, 48) !important;
            border-radius: 8px !important;
            border: 1px solid rgb(74, 76, 83) !important;
            box-shadow: none !important;
        }

        .is-focused {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .el-input--suffix {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .is-hovering {
            border: 1px solid #0a906c !important;
            box-shadow: none !important;
            outline: none !important;

        }
    }



}
</style>
<style scoped lang="scss">
.betting {
    width: 100%;
    height: 100%;



    h3 {
        font-size: 24px;
        color: #fff;
    }

    dl {
        width: 100%;
        margin-top: 20px;
        @include flex(row, flex-start, center);

        dd {

            @include flex(column, flex-start, flex-start);

            span {
                display: block;
                height: 20px;
                color: #fff;
            }
        }

        dd+dd {
            margin-left: 50px;
        }
    }

    .nodata {
        border: 1px solid #4b4e55;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        padding: 0;
        border: 1px solid #3d4148;


        thead {
            height: 65px;

            th {
                text-align: center;
                font-size: 14px;
                color: #b5bac8;
                height: 100%;
                padding: 8px;
                line-height: 24px;
                font-weight: bold;
                background-color: rgb(61, 65, 72);
                border: 1px solid #4b4e55;
            }
        }



        tbody {
            width: 100%;
            height: 400px;
            overflow: auto;
        }

        tr {


            td {
                text-align: center;
                font-size: 14px;
                color: #b5bac8;
                padding: 4px 8px;

                border: 1px solid #3d4148;

                img {
                    width: 40px;
                }
            }

            .nodata {
                width: 100%;
                padding: 20px 0;
                color: #909399;
                font-size: 14px;
            }
        }


    }

    .page {
        margin-top: 20px;
        @include flex(row, flex-end, center);
    }
}
</style>